<template>
    <div>

        <!-- user input element -->
        <div :class="{'sp-input-container':true,'sp-open':show,'sp-disabled':disabled}" ref="caller" @click="open">
            <!--<slot></slot>-->
            <!--<input type="text" ref="input" v-if="!multiple" readonly="readonly" :value="results">-->
            <div class="sp-base sp-input" ref="input" v-if="!multiple">
                <span v-html="results"></span>
                <span class="sp-placeholder" v-show="picked.length === 0">{{placeholderString}}</span>
            </div>
            <div class="sp-base sp-inputs" ref="input" v-if="multiple">
                <span class="sp-placeholder" v-show="picked.length === 0">{{placeholderString}}</span>
                <span class="sp-selected-tag" v-for="sel,index in picked">
                    <span v-html="renderCell(sel)"></span>
                    <span @click="remove(index)" v-show="!disabled">
                        <i class="sp-iconfont sp-icon-close"></i>
                    </span>
                </span>
            </div>
            <div class="sp-clear" v-show="!multiple && picked.length && !disabled"
                 @click.stop="remove" :title="i18n.clear"><i class="sp-iconfont sp-icon-close"></i></div>
            <div :class="{'sp-button':true,open: show}"><span class="sp-caret"></span></div>
        </div>

        <!-- drop down list -->
        <v-dropdown ref="dropdown" @show-change="dropdownVisible" >
            <!-- message bar -->
            <div class="sp-message" v-if="message">
                <i class="sp-iconfont sp-icon-warning"></i>
                <span v-html="message"></span>
            </div>
            <!-- header bar -->
            <div class="sp-header" v-show="!message">
                <h3 v-html="headerTitle"></h3>
                <button type="button" :title="i18n.select_all" class="sp-select-all-btn" @click="pickPage(true)" v-if="multiple">
                    <i class="sp-iconfont sp-icon-select-all"></i>
                </button>
                <button type="button" :title="i18n.unselect_all" class="sp-remove-all-btn" @click="pickPage(false)" v-if="multiple">
                    <i class="sp-iconfont sp-icon-unselect-all"></i>
                </button>
                <button type="button" :title="i18n.clear_all" class="sp-clear-all-btn" @click="remove" >
                    <i class="sp-iconfont sp-icon-clear"></i>
                </button>
                <button type="button"
                        @click="close"
                        :title="i18n.close_btn"
                        class="sp-close-btn"><i class="sp-iconfont sp-icon-close"></i></button>
            </div>

            <!-- search bar -->
            <div class="sp-search" v-show="!message">
                <input type="text" autocomplete="off" ref="search"
                       v-model="search"
                       @keyup="processKey"
                       @keydown.stop="processControl"
                       class="sp-search-input">
            </div>

            <!-- content list bar -->
            <div class="sp-result-area" v-show="!message" ref="list">
                <!-- single column(list) mode -->
                <ul class="sp-results"
                    v-if="!tbColumns"
                    v-show="list.length"
                    @mouseleave="highlight=-1"
                    ref="listUl">
                    <li :title="row[showField]" v-for="row,index in list"
                        :class="{
                            'sp-over':highlight===index,
                            'sp-selected':picked.findIndex(val=>val[keyField] === row[keyField])!==-1
                        }"
                        @click="selectItem(row)"
                        v-html="renderCell(row)"
                        @mouseenter="highlight=!picked.includes(row)?index:-1" >
                    </li>
                </ul>
                <!-- multiple columns(table) mode -->
                <table v-if="Array.isArray(tbColumns)&&tbColumns.length" v-show="list.length" class="sp-table">
                    <thead>
                        <tr>
                            <th v-for="col in tbColumns">{{col.title}}</th>
                        </tr>
                    </thead>
                    <tbody @mouseleave="highlight=-1">
                        <tr v-for="row,index in list"
                            :class="{
                                'sp-over': highlight === index,
                                'sp-selected':picked.findIndex(val=>val[keyField] === row[keyField])!==-1
                            }"
                            @click="selectItem(row)"
                            @mouseenter="highlight=!picked.includes(row)?index:-1" >
                            <td v-for="col in tbColumns" v-html="row[col.data]"></td>
                        </tr>
                    </tbody>
                </table>


                <!-- no result message -->
                <div v-if="!list.length" class="sp-message" v-text="i18n.not_found"></div>
            </div>

            <!-- pagination bar -->
            <div class="sp-pagination" v-show="!message" v-if="pagination">
                <div class="sp-page-info">{{pageInfo}}</div>
                <ul ref="page">
                    <li :class="{'sp-disabled':pageNumber===1}" :title="i18n.first">
                        <a href="javascript:void(0);" @click="switchPage('first')" >
                            <i class="sp-iconfont sp-icon-first"></i>
                        </a>
                    </li>
                    <li :class="{'sp-disabled':pageNumber===1}" :title="i18n.prev">
                        <a href="javascript:void(0);" @click="switchPage('previous')" >
                            <i class="sp-iconfont sp-icon-previous"></i>
                        </a>
                    </li>
                    <li :class="{'sp-disabled':pageNumber===totalPage}" class="sp-right" :title="i18n.last">
                        <a href="javascript:void(0);" @click="switchPage('last')" >
                            <i class="sp-iconfont sp-icon-last"></i>
                        </a>
                    </li>
                    <li :class="{'sp-disabled':pageNumber===totalPage}" class="sp-right" :title="i18n.next">
                        <a href="javascript:void(0);" @click="switchPage('next')" >
                            <i class="sp-iconfont sp-icon-next"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </v-dropdown>
    </div>
</template>

<script>
    import dropdown from './Dropdown';
    import lang from './language';
    export default {
        name: "v-selectpage",
        components: {
            'v-dropdown': dropdown
        },
        props: {
            data: {
                type: Array | String,
                required: true
            },
            /**
             * server side querying params
             */
            params: Object,
            /**
             * server side result format
             * @param resp [object] server side request result
             * @return [object] the formatted data
             */
            resultFormat: Function,
            title: {
                type: String,
                default: 'SelectPage'
            },
            placeholder: {
                type: String,
                default: ''
            },
            multiple: {
                type: Boolean,
                default: false
            },
            language: {
                type: String,
                default: 'cn'
            },
            /**
             * Specify key to make list item selected, the must be match 'keyField' option value
             *
             * example:
             * single mode: '123'
             * multiple mode: '123, 124, 125'
             */
            selected:String,
            keyField: {
                type: String,
                default: 'id'
            },
            /**
             * Specify field to
             */
            showField: {
                type: String | Function,
                default: 'name'
            },
            /**
             * Table mode to show data, format sample:
             * title: [string] - the title content text,
             * data: [string|function] - specify column name to load data,
             * [
             *      {title: 'full name', data: function(row){ return row.lastName + ' ' + row.firstName; }},
             *      {title: 'age', data: 'age'},
             *      {title: 'birthday', data: function(row){ return someformat(row.birthday); }}
             * ]
             */
            tbColumns:  Array,
            /**
             * Sort config, use space to split field name and sort order
             * example: 'name desc'
             */
            sort: String,
            searchField: String,
            pageSize:{
                type: Number,
                default: 10
            },
            /**
             * max selected item limit, set 0 to unlimited
             */
            maxSelectLimit: {
                type: Number,
                default: 0
            },
            pagination: {
                type: Boolean,
                default: true
            }
        },
        data(){
            return {
                show: false,
                disabled: false,
                search: '',
                lastSearch: null,
                searchColumn: null,
                i18n: {},
                message: '',
                highlight: -1,

                list: [],
                sortedList: null,
                picked: [],

                pageNumber: 1,
                totalPage: 0,
                totalRows: 0
            };
        },
        methods:{
            open(){
                if(this.disabled) return;
                if(!this.show) this.show = true;
                else this.inputFocus();
            },
            close(){
                this.$refs.dropdown.$emit('show', false);
            },
            remove(index){
                let that = this, removed = [];
                if(typeof(index)!=='number'){
                    removed = this.picked.concat();
                    this.picked.splice(0, this.picked.length);
                }else{
                    removed = [this.picked[index]];
                    this.picked.splice(index, 1);
                }

                if(this.multiple && this.show){
                    this.$nextTick(()=>{
                        that.adjustList();
                        that.inputFocus();
                    });
                }
                this.$emit('removed', removed);
                this.emitValues();
            },
            pickPage(check){
                let removed = [];
                for(let row of this.list){
                    if(!this.picked.includes(row) &&
                        (this.maxSelectLimit && this.picked.length < this.maxSelectLimit) &&
                        check)
                        this.picked.push(row);//picked current page items
                    if(this.picked.includes(row) && !check){//removed current page items
                        let idx = this.picked.findIndex(value => Object.is(value, row));
                        if(idx !== -1) {
                            removed.push(this.picked[idx]);
                            this.picked.splice(idx, 1);
                        }
                    }
                }

                this.$emit('removed', removed);
                this.$nextTick(()=>{
                    this.adjustList();
                    this.emitValues();
                    this.inputFocus();
                });
            },
            inputFocus(){
                this.$refs.search.focus({preventScroll:true});
            },
            adjustList(){
                this.$refs.dropdown.$emit('adjust', this.$refs.caller);
            },
            getResults(){
                let str = '';
                if(this.picked.length && !this.multiple){
                    switch (typeof(this.showField)){
                        case 'string':
                            str += this.picked[0][this.showField];
                            break;
                        case 'function':
                            str += this.showField(this.picked[0]);
                            break;
                    }
                }
                return str;
            },
            dropdownVisible(val){
                this.show = val;
            },
            processKey(e){
                if (![37, 38, 39, 40, 27, 13, 9].includes(e.keyCode)) this.populate();
            },
            processControl(e){
                if ([37, 38, 39, 40, 27, 13, 9].includes(e.keyCode)) {
                    switch (e.keyCode) {
                        case 37://left
                            this.switchPage('previous');
                            break;
                        case 38:// up
                            this.previous();
                            break;
                        case 39://right
                            this.switchPage('next');
                            break;
                        case 40:// down
                            this.next();
                            break;
                        case 9: // tab
                        case 13:// return
                            if(this.highlight !== -1) this.selectItem(this.list[this.highlight]);
                            break;
                        case 27:// escape
                            this.close();
                            break;
                    }
                }
            },
            next(){
                if(this.highlight < (this.list.length-1)){
                    let that = this, nextIndex = this.list.findIndex((val, idx)=>{
                        return ((idx > that.highlight) && !that.picked.includes(val));
                    });
                    if(nextIndex !== -1) this.highlight = nextIndex;
                }
            },
            previous(){
                if(this.highlight > 0) {
                    let that = this,preIndex = -1 ,previous = this.list.filter((val, idx)=>{
                        return ((idx < that.highlight) && !that.picked.includes(val));
                    });
                    if(previous.length){
                        preIndex = this.list.findIndex(value => Object.is(value, previous[previous.length-1]));
                        if(preIndex !== -1) this.highlight = preIndex;
                    }
                }
            },
            renderCell(row){
                let result = '';
                if(row && Object.keys(row).length){
                    if(typeof(this.showField) === 'string') result = row[this.showField];
                    else if(typeof(this.showField) === 'function') result = this.showField(row);
                }
                return result;
            },
            selectItem(row){
                if(this.picked.includes(row)) return;
                if(this.multiple){
                    if((this.maxSelectLimit && (this.picked.length < this.maxSelectLimit)) || !this.maxSelectLimit)
                        this.picked.push(row);
                    else
                        this.message = this.i18n.max_selected.replace('max_selected_limit', `<b>${this.maxSelectLimit}</b>`);
                    this.$nextTick(()=>{
                        this.adjustList();
                        this.inputFocus();
                    });
                }else{
                    this.picked = [row];
                    this.close();
                }
                this.emitValues();
                this.highlight = -1;
            },
            sortList(){
                if(this.data && Array.isArray(this.data) && this.sort){
                    let that = this, sortArr = this.sort.split(' '), sort = {};
                    if(sortArr.length === 2){
                        sort.field = sortArr[0];
                        sort.order = sortArr[1];
                        this.sortedList = this.data.concat().sort((a, b)=>{
                            let valA = a[sort.field], valB = b[sort.field], result = null;
                            let order = sort.order ? sort.order.toLowerCase() : 'asc';
                            if(order === 'asc'){
                                result = typeof(valA)==='number'?valA-valB:String(valA).localeCompare(String(valB));
                            }else if(order === 'desc'){
                                result = typeof(valA)==='number'?valB-valA:String(valB).localeCompare(String(valA));
                            }
                            return result;
                        });
                    }
                }
            },
            populate(){
                if(this.data){
                    let that = this;
                    if(this.search && this.search !== this.lastSearch) this.pageNumber = 1;
                    if(Array.isArray(this.data)){
                        let list = this.sortedList?this.sortedList.concat():this.data.concat();
                        if(this.search)
                            list = list.filter(val => val[that.searchColumn].toLowerCase().includes(that.search.toLowerCase()));
                        this.totalRows = list.length;
                        this.totalPage = this.pagination ? Math.ceil(list.length / this.pageSize) : 1;


                        if(this.pagination){
                            let start = (this.pageNumber - 1) * this.pageSize, end = start + this.pageSize -1;
                            this.list = list.filter((val,index)=>index >= start&&index <= end);
                        }else this.list = list;
                    }else if(typeof(this.data) === 'string'){
                        this.remote(false);
                    }
                    if(this.search) this.lastSearch = this.search;
                    this.highlight = -1;
                }
                this.inputFocus();
            },
            remote(init){
                if(typeof(this.data) === 'string' && this.dataLoad && typeof(this.dataLoad === 'function')){
                    let that = this, queryParams = this.params && Object.keys(this.params).length?
                        JSON.parse(JSON.stringify(this.params)):{};
                    queryParams.pageSize = this.pageSize;
                    queryParams.pageNumber = this.pageNumber;
                    if(this.sort) queryParams.orderBy = this.sort;
                    if(init && this.selected){
                        queryParams.searchKey = this.keyField;
                        queryParams.searchValue = this.selected;
                    }
                    if(this.search){
                        let field = '';
                        //this.searchField ? this.searchField : this.showField;
                        if(!this.searchField && typeof(this.showField) === 'function'){
                            console.error('Your "showField" was a function, in server side mode, your need specified "searchField" to search content.');
                        }else{
                            field = this.searchField ? this.searchField : this.showField;
                            queryParams[field] = this.search;
                        }
                    }
                    this.dataLoad(this, this.data, queryParams).then(resp=>{
                        if(resp){
                            if(!that.resultFormat || typeof(that.resultFormat) !== 'function'){
                                console.error('In server side mode, you need specified "resultFormat" function to format server side result.');
                            }else{
                                let tmpObj = that.resultFormat(resp);
                                if(tmpObj && Object.keys(tmpObj).length){
                                    if(!init){
                                        that.list = tmpObj.list;
                                        that.totalRows = tmpObj.totalRow;
                                        that.totalPage = that.pagination ? Math.ceil(tmpObj.totalRow / that.pageSize) : 1;
                                    }else that.picked = tmpObj.list;
                                }
                            }
                        }
                    });
                }
            },
            switchPage(pNum){
                if(typeof(pNum) === 'string'){
                    switch (pNum){
                        case 'first':
                            if(this.pageNumber!==1) this.pageNumber = 1;
                            break;
                        case 'previous':
                            if(this.pageNumber!==1) this.pageNumber--;
                            break;
                        case 'next':
                            if(this.pageNumber!==this.totalPage) this.pageNumber++;
                            break;
                        case 'last':
                            if(this.pageNumber!==this.totalPage) this.pageNumber = this.totalPage;
                            break;
                    }
                }else if(typeof(pNum) === 'number'){
                    this.pageNumber = pNum;
                }
                this.populate();
            },
            initSelection(){
                if(this.selected) {
                    if(Array.isArray(this.data)){
                        let that = this, arr = this.selected.split(',');
                        if(arr.length){
                            let matchRows = this.data.filter(val=>arr.includes(String(val[that.keyField])));
                            if(matchRows.length) {
                                this.picked = this.multiple ? matchRows : [matchRows[0]];
                                this.emitValues();
                            }
                        }
                        this.findSelectionPage();
                    }else if(typeof(this.data) === 'string'){
                        this.remote(true);
                    }
                }
                this.populate();
            },
            findSelectionPage(){
                if(!this.multiple && this.pagination){
                    let list = this.sortedList?this.sortedList.concat():this.data.concat();
                    let index = list.findIndex(val => String(val[this.keyField]) === this.selected);
                    if(index >= 0){
                        this.pageNumber = Math.ceil((index + 1) / this.pageSize);
                    }
                }
            },
            disabledInput(val){
                if(typeof(val) === 'boolean') this.disabled = val;
                if(val === true && this.show) this.close();
            },
            emitValues(){
                this.$emit('values', this.picked.concat());
            }
        },
        watch: {
            show(val){
                if(val) {
                    let that = this;
                    this.$refs.dropdown.$emit('show', true, this.$refs.caller);
                    this.$nextTick(()=>{
                        that.$refs.search.focus({preventScroll:true});
                    });
                }
            },
            picked(val){
                if(this.message && this.maxSelectLimit && val.length < this.maxSelectLimit)
                    this.message = '';
            },
            selected(val){
                this.initSelection();
            },
            data(val){
                this.sortList();
                this.populate();
                if(this.picked.length) this.picked.splice(0, this.picked.length);
                else this.initSelection();
            }
        },
        computed: {
            headerTitle(){
                let headerStr = this.i18n.items_selected, result = '';
                let replace = val => headerStr.replace('selected_count', `<b>${val}</b>`);
                if(this.picked.length){
                    result = this.multiple?replace(this.picked.length):this.getResults();
                }else result = this.title;
                return result;
            },
            results(){
                return this.getResults();
            },
            placeholderString(){
                return this.placeholder?this.placeholder:this.i18n.placeholder;
            },
            pageInfo(){
                return this.i18n.page_info.replace('page_num', this.pageNumber)
                    .replace('page_count',this.totalPage)
                    .replace('row_count',this.totalRows);
            }
        },
        beforeMount(){
            //read language
            this.i18n = lang[this.language];
        },
        mounted(){
            let that = this;
            //switch class name
            let className = this.$el.className;
            this.$el.className = 'v-selectpage';
            this.$refs.input.className += ' ' + className;

            //set searchField when user not config
            if(!this.searchField){
                if(typeof(this.showField) === 'string') this.searchColumn = this.showField;
                else if(Array.isArray(this.showField) && this.showField.length)
                    this.searchColumn = this.showField[0].data;
            }else this.searchColumn = this.searchField;

            //sort data list
            this.sortList();

            //init item selected
            this.initSelection();

            this.$on('disabled', this.disabledInput);
            this.$on('clear', this.remove);
        },
        destroyed(){
            this.$off('disabled', this.disabledInput);
            this.$off('clear', this.remove);
        }
    }
</script>

<style lang="scss" scoped>
div.v-selectpage{
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
    /*font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    box-sizing: border-box;
    div.sp-input-container {
        position: relative;
        span.sp-placeholder { color: #AAAAAA; }
        &.sp-open{
            div.sp-input, div.sp-inputs { border: 1px solid #999999;color: black;border-radius: 2px; }
            div.sp-input {background-color: #F9F9F9;}
        }
        &.sp-disabled {
            div.sp-input, div.sp-inputs { cursor: not-allowed;color: #555555;background-color: #eeeeee; }
            div.sp-button { cursor: not-allowed; }
        }
        div.sp-base {
            display: block;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            box-sizing: border-box;
        }
        div.sp-input { background-color: white;cursor: pointer;color: #333333;opacity: 1; }
        div.sp-inputs {
            /*margin: 0 24px 0 0;*/
            padding: 3px 24px 0 3px;
            position: relative;
            overflow: hidden;
            clear: both;
            cursor: pointer;
            list-style: none;
            height: auto;
            min-height: 34px;
            font-size: 14px;
            span.sp-placeholder{ margin-left: 9px;margin-top: 3px; display: inline-block; }
            span.sp-selected-tag {
                list-style: none;
                padding: 0 5px;
                margin-right: 3px;
                margin-bottom: 3px;
                /* margin-bottom: 2px; */
                float: left;
                position: relative;
                box-sizing: content-box;
                border: 1px solid #AAAAAA;
                border-radius: 3px;
                background-color: #EFEFEF;
                cursor: pointer;
                max-width: 100%;
                box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
                height: 24px;
                line-height: 24px;
                -webkit-transition: all .5s cubic-bezier(.175,.885,.32,1);
                transition: all .5s cubic-bezier(.175,.885,.32,1);
                &:hover{background-color: white;border: 1px solid #D0D0D0;box-shadow: 0 2px 7px rgba(0,0,0,.1);}
                i {
                    font-size: 14px; color: #AAAAAA;
                    &:hover { color: black; }
                }
            }
        }
        div.sp-clear {
            position: absolute;
            top: 0;
            right: 25px;
            display: block;
            width: auto;
            height: 100%;
            cursor: pointer;
            font-size: 20px;
            color: #666666;
            font-weight: 600;
            margin: 0;
            padding: 4px 0 0 0;
            box-sizing: border-box;
            line-height: 1;
            i { font-size: 12px; }
            &:hover { color: black;font-weight: bold; }
        }
        div.sp-button {
            display: inline-block;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;

            border: 0;
            width: 24px;
            height: 100%;
            padding: 0;
            vertical-align: middle;
            line-height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            span.sp-caret {
                position: absolute;
                top: 50%;
                right: 12px;
                margin-top: -1px;
                vertical-align: middle;
                display: inline-block;
                width: 0;
                height: 0;
                margin-left: 2px;
                border-top: 4px dashed;
                /*border-top: 4px solid\9;*/
                border-right: 4px solid transparent;
                border-left: 4px solid transparent;
                transition:transform .2s ease;
            }
            &.open span.sp-caret { transform: rotate(180deg); }
        }
    }

    div.sp-header {
        /*border-bottom: 1px solid #E6E7E7;*/
        background-color: white;
        /*position: relative;*/
        & > h3 {
            margin: 6px 100px 0 10px;
            text-align: left;
            height: 18px;
            color: #24292e;
            font-size: 16px;
            font-weight: 500;
            white-space: nowrap;
        }
        button{
            position: absolute;
            -webkit-appearance: none;
            padding: 0;
            cursor: pointer;
            background: 0 0;
            border: 0;
            outline: none;
            line-height: 100%;
            color: #999999;
            top: 3px;
            font-size: 21px;
            &.sp-close-btn { right: 9px; }
            &.sp-remove-all-btn { right: 55px; }
            &.sp-select-all-btn { right: 81px; }
            &.sp-clear-all-btn { right: 31px; }
            &:hover { color: black; }
        }
    }




    .sp-search {
        padding: 10px;
        background-color: white;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        .sp-search-input {
            display: block;
            background-color: #fdfdfd;
            margin: 0 !important;
            width: 100%;

            font-size: 14px;
            line-height: 20px;
            min-height: 20px;
            padding: 4px 6px;
            vertical-align: middle;
            box-sizing: border-box;

            outline: none !important;
            height: 30px;

            border-radius: 2px;
            border: 1px solid #dddddd;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            &:focus { border: 1px solid #bbbbbb;box-shadow: 0 0 0 3px rgba(150,150,150, 0.2);background-color: white; }
        }
    }

    div.sp-result-area{
        background-color: white;min-width: 298px;max-height: 320px;overflow-y: auto;
        ul.sp-results {
            background-color: white;list-style: none;margin: 0;padding: 0;
            li {
                height: auto !important;
                line-height: 1;
                margin: 0;
                overflow: hidden;
                padding: 4px 8px;
                position: relative;
                text-align: left;
                white-space: nowrap;
                font-size: 14px;
                color: black;
                cursor : pointer;
                &.sp-message-box {
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    box-sizing: content-box;
                    font-size: 14px;
                    cursor: default;
                }
                &.sp-over { background-color: #53A4EA !important;color: #fff !important;cursor: pointer; }
                &.sp-selected { color: #cccccc;cursor: default; }
            }
        }
        table.sp-table {
            width: 100%;
            td,th { font-size: 14px;border: 0 !important; }
            th{ background-color: #F5F5F5;padding: 5px 8px;}
            td{ padding: 4px 8px; }
            tbody {
                tr{
                    &.sp-over {
                        td { background-color: #53A4EA !important;color: #fff !important;cursor: pointer; }
                    }
                    &.sp-selected { color: #cccccc;cursor: default; }
                }
            }
        }
    }

    div.sp-pagination {
        padding: 0;
        background-color: white;
        position: relative;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        text-align: center;
        font-size: 14px;
        div.sp-page-info { height: 28px;line-height: 29px;font-weight: 400; }
        ul {
            position: absolute;
            top: 0;
            padding: 0;
            margin: 0;
            text-align: left;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            width: 100%;
            li {
                display: inline-block;text-align: center;
                a {
                    display: inline-block;
                    padding: 7px 7px 5px 7px;
                    font-size: 14px;
                    color: #6a737d;
                    text-decoration: none;
                    cursor: pointer;
                    height: 28px;
                    line-height: 100%;
                    background: transparent;
                    &:hover { color: black;font-weight: bold; }
                }
                &.sp-right{ float:right; }
                &:first-child{ border-bottom-left-radius: 2px; }
                &:last-child{ border-bottom-right-radius: 2px; }
                &.sp-disabled {
                    a { color: #DDDDDD;font-weight: normal;/*cursor: not-allowed;*/ }
                }
            }
        }
    }
    div.sp-message {
        padding: 10px;
        i {position: absolute;top: 3px;font-size: 22px;}
        span{ margin-left: 30px; }
    }
}
</style>
<style lang="scss">
    /* icons */
    @font-face {font-family: "iconfont";
        src: url('?t=1530004230003'); /* IE9*/
        src: url('?t=1530004230003#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
        url('?t=1530004230003') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('?t=1530004230003#iconfont') format('svg'); /* iOS 4.1- */
    }

    .sp-iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .sp-icon-warning:before { content: "\e663"; }
    .sp-icon-clear:before { content: "\e74b"; }
    .sp-icon-unselect-all:before { content: "\e634"; }
    .sp-icon-select-all:before { content: "\e628"; }
    .sp-icon-last:before { content: "\e67e"; }
    .sp-icon-first:before { content: "\e681"; }
    .sp-icon-next:before { content: "\e70d"; }
    .sp-icon-previous:before { content: "\e70f"; }
    .sp-icon-close:before { content: "\e600"; }
</style>